<script setup>
import { onMounted, computed, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const router = useRouter();
const gozxxq = () => {
  store.commit('zixun/SET_LISTXQ',id)
  router.push("/zxxq");
};

const store = useStore();
let zixunList = computed(() => store.state.zixun.zixunList);

</script>

<template>
  <div class="c-waibian">
    <div class="c-toubu">咨询</div>

    <div v-for="(item,index) in zixunList" :key="index" @click="gozxxq(item._id)" class="c-kuang">
      <div class="c-zixun">
        <div class="c-zixunzuo">
          <div class="c-img">
            <img :src="item.avatar" alt="" />
          </div>
        </div>

        <div class="c-zixunyou">
          <div class="c-biaoti">{{item.name}}</div>
          <div class="c-biaoxia">
            <div class="c-shijian">{{item.uploadTime}}</div>
            <div class="c-liulan">
              <van-icon name="eye-o" />
              <span>1000</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>



<style scoped>
.c-toubu {
  width: 100%;
  height: 50px;
  font-size: 18px;
  font-weight: 600;
  line-height: 50px;
  padding-left: 20px;
  border-bottom: 1px solid #999999;
  position: fixed;
  top: 0;
  background-color: #fff;
  z-index: 999;
}

.c-img {
  width: 120px;
  height: 100px;
  margin-left: 10px;
}
.c-img img {
  width: 100%;
  height: 100%;
}

.c-zixun {
  overflow: hidden;
  width: 100%;
  height: 150px;
  display: flex;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
  margin: 20px 0;
}

.c-zixunyou {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: 0 10px;
}

.c-biaoti {
  font-size: 14px;
}

.c-biaoxia {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  align-items: center;
}
.c-liulan {
  display: flex;
  align-items: center;
}

.c-zixunzuo {
  display: flex;
  align-items: center;
}
.c-kuang :nth-child(1) {
  border-top: 0;
}

.c-kuang {
  margin-top: 45px;
  margin-bottom: 50px;
}
</style>